<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'
import { ScoreModelMB, getScoresMBForBranchTerm } from '@/api-scp/dashboard'

@Component({
  name: 'ScoresChartMB',
  components: {}
})
export default class extends mixins(ResizeMixin) {
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '500px' }) private height!: string

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private async initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)

    const lastTerm = await getScoresMBForBranchTerm('-', 'LAST')
    const thisTerm = await getScoresMBForBranchTerm('-', 'THIS')
    this.setOptions(lastTerm, thisTerm)
  }

  private setOptions(lastTerm, thisTerm) {
    if (!this.chart) {
      return
    }

    const scoreItems = ScoreModelMB.items

    const indicator = scoreItems.map(({
      name,
      max
    }) => {
      return {
        name,
        max
      }
    })

    const lastTermData = scoreItems.map(item => lastTerm[item.field])
    const thisTermData = scoreItems.map(item => thisTerm[item.field])

    const option: EChartsOption = {
      legend: {
        bottom: 0
      },
      tooltip: { },
      radar: {
        indicator,
        splitLine: { show: true }
      },
      series: [{
        name: ScoreModelMB.name,
        type: 'radar',
        data: [
          {
            value: lastTermData,
            name: '上期得分率'
          },
          {
            value: thisTermData,
            name: '本期得分率'
          }
        ]
      }]
    }

    console.log(JSON.stringify(option, null, 2))

    this.chart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>

</style>
